import React from 'react';
import Header from './../module/header/header.js';
import Footer from './../module/footer/footer.js';
import PostUser from './../module/box/postUser.js';
import PostBody from './../module/box/postDetail.js';
import Push from './../module/common/push.js';
import Commonet from './../pages/detail.js';
import CommentBox from './../module/box/comment.js';
import {readPost,replyPost,checkLogin} from './../api';
import {remove} from './../store';
import $ from 'jquery';
import './../static/css/post.css';

export default class Post extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    	postid: -1,
    	context: '',
    	currentFloor:1,
    	good: 0,
    	readTime: 0,
    	title: '',
    	create: '0000-00-00 00:00:00',
    	user:null,
    	type:null,
    	replys:null,
    	length:0,
    	authorName:'',
    	replyText:'',
    	login:false,
        today_push:[
            {
                img:'https://csdnimg.cn/feed/20181120/75f67c099eb1f5eb6df80a25254621e2.png?x-oss-process=image/resize,h_64',
                title:'免费 | 区块链技术与金融应用发展论坛 · 香港站'
            },
            {
                img:'https://csdnimg.cn/feed/20181120/75f67c099eb1f5eb6df80a25254621e2.png?x-oss-process=image/resize,h_64',
                title:'免费 | 区块链技术与金融应用发展论坛 · 香港站'
            },
            {
                img:'https://csdnimg.cn/feed/20181120/75f67c099eb1f5eb6df80a25254621e2.png?x-oss-process=image/resize,h_64',
                title:'免费 | 区块链技术与金融应用发展论坛 · 香港站'
            },
            {
                img:'https://csdnimg.cn/feed/20181120/75f67c099eb1f5eb6df80a25254621e2.png?x-oss-process=image/resize,h_64',
                title:'免费 | 区块链技术与金融应用发展论坛 · 香港站'
            },
            {
                img:'https://csdnimg.cn/feed/20181120/75f67c099eb1f5eb6df80a25254621e2.png?x-oss-process=image/resize,h_64',
                title:'免费 | 区块链技术与金融应用发展论坛 · 香港站'
            },
            {
                img:'https://csdnimg.cn/feed/20181120/75f67c099eb1f5eb6df80a25254621e2.png?x-oss-process=image/resize,h_64',
                title:'免费 | 区块链技术与金融应用发展论坛 · 香港站'
            },
            {
                img:'https://csdnimg.cn/feed/20181120/75f67c099eb1f5eb6df80a25254621e2.png?x-oss-process=image/resize,h_64',
                title:'免费 | 区块链技术与金融应用发展论坛 · 香港站'
            },
            {
                img:'https://csdnimg.cn/feed/20181120/75f67c099eb1f5eb6df80a25254621e2.png?x-oss-process=image/resize,h_64',
                title:'免费 | 区块链技术与金融应用发展论坛 · 香港站'
            },
        ],
        codes:[
            '大数据',
            '关注',
            '资讯',
            '人工智能',
            '区块链',
            '数据库',
            '编程语言',
            '图像处理'

        ]
    }
    this.countWords = this.countWords.bind(this);
    this.gotoReply = this.gotoReply.bind(this);
  }

  componentWillMount() {
  

  	const param = this.props.location.search.substr(1);
  	const params = new Map();
  	const r = param.split("&");
  	for(var i=0;i<r.length;i++) {
  		const k = r[i].split("=");
  		params.set(k[0],k[1]);
  	}
  	let postId = params.get("id");
  	readPost({'postid':postId}).then(resp=>{
  		this.setState({
  		  postid: postId,
  		  context: resp.content.context,
  		  currentFloor: resp.content.currentFloor,
  		  good: resp.content.good,
  		  title: resp.content.title,
  		  readTime:resp.content.readTime,
  		  create:resp.content.createTime,
  		  user:resp.content.user,
  		  type:resp.content.type,
  		  replys:resp.content.replys,
  		  authorName: resp.content.user.userinfo.nickName
  		});
  	});	
    checkLogin().then(resp=>{
        if(resp.content==true) {
          this.setState({
            'login':true
          })
        } else {
          console.info('登录失败');
          remove('_user');
          remove('login_status');
          remove('token');
          remove('username');
        }
    });
  }

  countWords(words) {
  	var tmp_actualText = words.replace(/<\/?[^>]*>/g,'').replace(/[ | ]*\n/g,'\n').replace(/\n[\s| | ]*\r/g,'\n').replace(/&nbsp;/ig,'');
  	this.setState({
  		length:tmp_actualText.length, 
  		replyText: words
  	});
  }


  gotoReply() {
  	let text = this.state.replyText;
  	let postid = this.state.postid;
  	if(postid) {
  		replyPost({'context':text,'postid':postid}).then(resp=>{
  			let array = this.state.replys;
  			array.unshift(resp.content);
  			this.setState({
  			  replys: array,
          context: ''
  			});
  		})
  	}
  }

  render() {
    return (
      <div className="App">
      	<Header />
      	<section className="wp">
      		<div className="brand" style={{height:'2px',background:'#e1e1e1',marginTop:'40px'}}>

      		</div>
      		<div className="brand">
		      	<div className="brand-left">
		      		<div className="user-brand" id="userbox">
		      			{
		      				<PostUser userinfo={this.state.user!=null?this.state.user.userinfo:null} />
		      			}
		      		</div>
                    <div className="code-brand" id="codebox">
                        <ul className="codebox">
                            <li className="hover hightitle"><a href="#">相关标签</a></li>
                            {
                                this.state.codes.map((code,index)=>(
                                    <li key={index}><a href="#">{code}</a></li>
                                ))
                            }
                        </ul>
                    </div>
		      	</div>
		      	<div className="brand-body">
		      		<div className="post-brand" id="postbox">
		      			{
		      				<PostBody cont={this.state.context} type={this.state.type} time={this.state.create} currentFloor={this.state.currentFloor} good={this.state.good} title={this.state.title} read={this.state.readTime} />
		      			}
		      		</div>
		      		{
                        this.state.login==true?
                        <div className="comment">
                            <Commonet count={this.countWords} />
                            <div className="comment_console">当前您正在输入...字数自动检索为:  <span style={{color:'#0AE',fontSize:'18px'}}>{this.state.length}</span> 字</div>
                        </div>
                    :''}
		      		{
                        this.state.login==true?
                        <div className="btn-group">
                            <button className="btn btn-success" style={{float:'right'}} onClick={this.gotoReply}>回复</button>
                            <div className="clear"></div>
                        </div>
                    :''}
		      		<div className="comment_area_title">评论区: 共{this.state.replys==null?'0':this.state.replys.length}条回复</div>
		      		<section className="comment_area">

		      			{this.state.replys==null?<div className="no-comment">还没有人评论，快来坐沙发吧~</div>:this.state.replys.map((reply,index)=>(
		      				<CommentBox key={index} data={reply} isAuthor={this.state.authorName==reply.user.userinfo.nickName?'true':'false'}/>
		      			))}
		      			
		      		</section>
		      	</div>
		      	<div className="brand-right">
		      		<div className="about-area">
		      			<Push css="today-push" title="今日推荐">
                            <ul>
                            {
                                this.state.today_push.map((resp,index)=>(
                                    <li key={index}>
                                    <div className="img_box">
                                        <a href="#">
                                            <img src={resp.img}/>
                                        </a>
                                    </div>
                                    <div className="content">
                                        <h3 className="company_name"><a href="#">{resp.title}</a></h3>
                                    </div>
                                    </li>
                                ))
                            }
                            </ul>
                        </Push>
		      		</div>
		      	</div>
		      	<div className="clear"></div>
	      	</div>
	    </section>

      <div className="push"></div>
	    <Footer></Footer>
      </div>
    );
  }
}